<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>webSocket测试</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!--<script type="text/javascript" src="js/jquery-1.7.2.js"></script>-->
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /**
             * 前端js的 socket.emit("事件名","参数数据")方法，是触发后端自定义消息事件的时候使用的,
             * 前端js的 socket.on("事件名",匿名函数(服务器向客户端发送的数据))为监听服务器端的事件
             **/
            var socket = io.connect("http://localhost:8503/?room=002");
            var firstconnect = true;
            if(firstconnect) {
                console.log("第一次链接初始化");
                //监听服务器连接事件
                socket.on('connect', function(){
                    $("#tou").html("链接服务器成功!");
                });
                //监听服务器关闭服务事件
                socket.on('disconnect', function(){
                    $("#tou").html("与服务器断开了链接!");
                });
                //监听服务器端发送消息事件
                socket.on('messageevent', function(data) {
                    $("#msg").html($("#msg").html() + "<br/>" + data);
                });
                //测试nameSpace
                socket.on('testEvint', function(data) {
                    $("#msg").html($("#msg").html() + "<br/>" + data);
                });

                socket.on('test', function(data) {
                    $("#msg").html($("#msg").html() + "<br/>" + data);
                });
                firstconnect = false;
            } else {
                socket.socket.reconnect();
            }



            $('#send').bind('click', function() {
                send();
            });



            function send(){
                if (socket != null) {
                    // debugger;
                    var message = document.getElementById('message').value;
                    var title = "message";
                    var obj = {message:message,title:title};
                    var str = JSON.stringify(obj);
                    socket.emit("messageevent",str);
                    socket.emit("testEvint",str);
                    socket.emit("test",str);
                } else {
                    alert('未与服务器链接.');
                }
            }
        });
    </script>

</head>
<body>
<div class="page-header" id="tou">
    webSocket及时聊天Demo程序
</div>
<div class="well" id="msg">
</div>
<div class="col-lg">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="发送信息..." id="message">
        <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="send" >发送</button>
      </span>
    </div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row --><br><br>
后台主动发送消息：<button class="btn btn-default" type="button" onclick="mess()">发送</button>
<br><br>
<a href="/user/index">back to index</a>
<script src="http://js.biocloud.cn/jquery/1.11.3/jquery.min.js"></script>
<script>
    function mess() {
        $.ajax({
            type: "POST",
            data:{index : "echo"},
            url: "/pushMsg",
            success: function (data) {
                //alert(data);
            }
        });
    }
</script>
</body>
</html>